<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：10、组件 动态组件</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<style type="text/css">
	.block{ width: 100px; height: 50px; }
	.red{ background-color: red; }
	.blue{ background-color: blue; }
	.black{ background-color: black; }
	</style>
</head>
<body>
	<div id="app">
		<!-- 
			如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数 
			这个也是很实用的功能，能有效提高网页体验，特别是那些dom渲染代价比较大的组件，有了缓存就无需重复渲染
		-->
		<keep-alive>
			<component v-bind:is="currentView">
			</component>
		</keep-alive>
		<br/>
		<button @click="toggleRed">red</button>
		<button @click="toggleBlue">blue</button>
		<button @click="toggleBlack">black</button>
	</div>

	<script type="text/javascript">
		// 在使用vue进行页面布局时，经常需要对组件进行组合，并能够控制组件的切换，
		// 这些切换的子组件的父组件内容会发生变化，我们将其叫做动态组件
		// 特别是在单页应用中，这种子组件的切换非常频繁，比如各种后台管理系统
		// 通常左侧有一列功能菜单，右侧是对应菜单选项的功能区，我们需要功能区根据
		// 管理员点击的菜单选项动态进行切换，这里可以使用 <component> 标签实现
		// 通过is属性控制显示的组件
		Vue.component('red',{
			template: '<div class="red block"></div>'
		})
		var vm = new Vue({
			el: '#app',
			data: {
				currentView: 'red'
			},
			// components里的对象都是一个局部vue对象，这个在demo46中有提及
			// 它们跟使用Vue.component全局注册的对象属于同一地位，只是作用域不同
			components: {
				// red: { 
				// 	template: '<div class="red block"></div>',
				// },
				blue: {
					template: '<div class="blue block"></div>'
				},
				black: {
					template: '<div class="black block"></div>'
				}
			},
			methods: {
				toggleRed: function(){
					this.currentView = 'red'
				},
				toggleBlue: function(){
					this.currentView = 'blue'
				},
				toggleBlack: function(){
					this.currentView = 'black'
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->